<template>
  <div class="order-details">
    <div class="section delivery-method">
      <div>配送方式：</div>
      <div>包邮（免支付运费）</div>
    </div>
    <hr class="divider" />
    <div class="section order-summary">
      <p>
        <strong>商品件数：</strong>
        <span class="right">{{ total }} 件</span>
      </p>
      <p>
        <strong>购买种类：</strong>
        <span class="right">{{ goods.length }} 种</span>
      </p>
      <p>
        <strong>商品总价：</strong>
        <span class="right">¥ {{ decimalPointSave(totalPrice) }}</span>
      </p>
      <p>
        <strong>所需积分：</strong>
        <span class="right">∫{{ decimalPointSave(totalIntegral) }}</span>
      </p>
    </div>
    <hr class="divider" />
  </div>
</template>

<script setup>
import { decimalPointSave } from '@/utils/strutils'
import { computed } from 'vue'

const props = defineProps({
  obj: Object,
})

const goods = props.obj

// 计算商品件数
const total = computed(() => {
  return goods.reduce((sum, cur) => sum + cur.number, 0)
})

// 计算商品总价
const totalPrice = computed(() => {
  return goods.reduce((sum, cur) => sum + cur.number * cur.price, 0)
})

// 计算所需积分
const totalIntegral = computed(() => {
  return goods.reduce((sum, cur) => sum + cur.number * cur.integral, 0)
})
</script>

<style scoped less="scss">
.order-details {
  padding: 20px;

  .section {
    padding: 10px 0;
  }

  .delivery-method {
    display: flex;
    flex-direction: column;
    div {
      margin: 5px 0;
    }
  }

  .divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 10px 0;
  }

  .order-summary {
    p {
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
      strong {
        font-weight: bold;
      }
      .right {
        text-align: right;
      }
    }
  }
}
</style>
